<template>
  <div>
    <el-row class='box'>
      <el-col :span="4" class="user-img">
        <img :src="userImg">
        <span class="tab">v12</span>
         <el-button type="primary" round size='small' class='mt30' @click='goUrl'>编辑信息</el-button>
      </el-col>
      <el-col :span="20">
        <table class="table">
          <tr>
            <td>用户ID</td>
            <td>123456</td>
            <td>手机号</td>
            <td>13886966640</td>
          </tr>
          <tr>
            <td>昵称</td>
            <td>123456</td>
            <td>性别</td>
            <td>13886966640</td>
          </tr>
          <tr>
            <td>生日</td>
            <td>123456</td>
            <td>身高</td>
            <td>13886966640</td>
          </tr>
          <tr>
            <td>体重</td>
            <td>123456</td>
            <td>学历</td>
            <td>13886966640</td>
          </tr>
          <tr>
            <td>家乡</td>
            <td>123456</td>
            <td>注册时间</td>
            <td>13886966640</td>
          </tr>
          <tr>
            <td>活跃时间</td>
            <td>123456</td>
            <td>帐户状态</td>
            <td>13886966640</td>
          </tr>
          <tr>
            <td>真实姓名</td>
            <td>123456</td>
            <td>身份证号码</td>
            <td>13886966640</td>
          </tr>
          <tr>
            <td>银行名称</td>
            <td>123456</td>
            <td>银行卡号</td>
            <td>13886966640</td>
          </tr>
          <tr>
            <td>支行名称</td>
            <td>123456</td>
            <td>支付宝帐号</td>
            <td>13886966640</td>
          </tr>
          <tr>
            <td>个人描述</td>
            <td colspan ='3'>123456</td>
          </tr>
          
        </table>
      </el-col>
    </el-row>
    <div class="box">
          <h3 class="title"><i class="el-icon-user-solid"></i>帐户信息</h3>
          <div class="p10">
            <table class="tables">
              <tr>
                <td>钻石余额</td>
                <td>0</td>
                <td>金币余额</td>
                <td>0</td>
                <td>累计送出礼物</td>
                <td>0</td>
                <td>累计获得礼物</td>
                <td>0</td>
              </tr>
              <tr>
                <td>充值总额</td>
                <td>0</td>
                <td>提现总额</td>
                <td>0</td>
                <td>好友总数</td>
                <td>0</td>
                <td>创建俱乐部总数</td>
                <td>0</td>
              </tr>
              <tr>
                <td>俱乐部总数</td>
                <td>0</td>
                <td>发布动态总数</td>
                <td>0</td>
                <td>举报数</td>
                <td>0</td>
                <td>被举报数</td>
                <td>0</td>
              </tr>
            </table>
          </div>
    </div>
    <div class="box">
      <h3 class="title"><i class="el-icon-user-solid"></i>过审信息</h3>
      <div class="p10">
        <table class="table2">
          <tr>
            <th>照片</th>
            <th>视频</th>
          </tr>
          <tr>
            <td>照片</td>
            <td>视频</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        userImg:require('@/assets/img/usermr.png')
      };
    },
    methods: {
      goUrl(){
        this.$router.push('/userInfo/edit')
      }
    }
  };
</script>
<style lang='less' scoped> 
.box{
  background: #fff;
  margin-bottom: 10px;
}
.user-img{
  padding: 60px 0;
  text-align: center;
  img{
    width: 120px;
    height:120px;
    display: block;
    margin: auto;
  }
  .tab{
    width: 20px;
    display: block;
    margin: 15px auto;
    padding:0 10px;
    background:#F56C6C;
    color:#fff;
    border-radius: 10px;
  }
}
.table{
  td{
    padding:8px 0;
    font-size: 14px;
    &:nth-child(odd){
      width: 15%;
      border:1px #f8f8f8 solid;
      background:#f8f8f8;
    }
    &:nth-child(even){
      width: 35%;
      border:1px #f8f8f8 solid;
    }
  }
}

.tables{
  td{
    padding:8px 0;
    font-size: 14px;
    width: 12.5%;
    &:nth-child(odd){
      border:1px #f8f8f8 solid;
      background:#f8f8f8;
    }
    &:nth-child(even){
      border:1px #f8f8f8 solid;
    }
  }
}
.table2{
  th{
    background:#f8f8f8;
  }
}
</style>